<template>
    <div>
        <tool-bar nav="" title='vue2升级3'></tool-bar>
        <el-row :gutter="20" class="grid">
            <el-col :span="10">
                共： {{ txt1_lines.length }} 行
                <el-input type="textarea" v-model="$data.txt1"></el-input>
            </el-col>
            <el-col :span="2" class="op_column">
                <el-button @click="eval_click"> eval-js-></el-button>
            </el-col>

            <el-col :span="10">
                共： {{ txt3_lines.length }} 行
                <el-input type="textarea" v-model="$data.txt3"></el-input>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="scss" scoped>

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;

    display: flex;

    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        min-height: 60vh !important;
        height: 70vh;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;


    button {
        display: block;
        margin: 5px 2px;
    }

    .el-button + .el-button {
        margin-left: 0;
    }
}

</style>
<script setup>
/**
 * Created by CodeGenerator
 */



defineOptions({
    name: "vue2-3",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"txt1": "", "txt3": ""});

const txt2 = `
// items变量表示左边内容的行数组
// text变量表示左边内容


var exp = "t =>{ return " + text + "} "
var json = eval( exp )();

var data =  json.data.call()  ;
var data_str = JSON.stringify( data );

var data_info = "";
var props_content = [];
var props2 = "";

if( data.info ){
  data_info = "const info = $computed(()=> $data.info ); ";

props_content.push("id: { type: String } ");
props_content.push("action: { type: String } ");


props2 = \`const action_name = $computed(()=>{
    return {add: "添加", edit: "修改"}[$props.action]
});\`
}


var props_def = json.props || {}
Object.keys(props_def).forEach(prop=>{
  var type = props_def[prop].type;
  var type_name = "";
  if( type.getJsType() == "array"){
     type_name = "[" + type.map(it=>it.name).join(",") + "]" ;
  }
  else{
     type_name = type.name;
  }
  if( prop == "value" ) {
    props2 += "\\nconst $model = defineModel({ type: " + type_name + " });"
    return;
  }
  props_content.push(prop + " : { type: " + type_name + " }");
});

var props = \`const $props = defineProps({
    \${props_content.join(",\\n")}
});

\${props2}
\`;

var methods = json.methods || {};
var methods_lines =  [];

Object.keys(methods).forEach(key =>{
var method = methods[key];


var method_str =  methods[key].toString();
var lines = method_str.split("\\n");
var b =  "const " + key + " = "  + lines[0].replace( key , "function" );

b += "\\n" +  lines.slice(1).join("\\n") + ";"

methods_lines.push(b);

});

var computed = json.computed || {};
var computeds = [];
Object.keys(computed).forEach(key=>{
    var value = computed[key];
    var type = value.getJsType();
    if( type == "function") {
        computeds.push( "const " + key +" = $computed( " + value.toString().replace( key, "function") + ");" );
    }
    else{
        var value2 = Object.keys(value).map(_key=>{
            var _value = value[_key];

            return _value.toString()
        }).join(",");

        computeds.push( "const " + key + " = $computed({ " + value2 + " });" );
    }

});


var watch = json.watch || {};
var watch_contents = [];
Object.keys(watch).forEach(key=>{
    var value = watch[key];
    var defs = [];
    if( "immediate" in value){
        defs.push( "immediate:" + value.immediate);
    }
    if( "deep" in value){
        defs.push("deep:" + value.deep );
    }
    watch_contents.push(\`watch(\${key}, \${value.handler.toString().replace("handler", "function")} ,{ \${defs.join(",")} });\` );
});

var mounted = (json.mounted || "").toString().replace("mounted","function");

if( mounted ){
    mounted = "onMounted( " + mounted + " )";
}

var ret = \`


defineOptions({
    name: "my---com",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive(\${data_str});
\${data_info}

\${props}


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);

\${computeds.join("\\n")}

\${methods_lines.join("\\n")}

\${mounted}

\${watch_contents.join("\\n")}
\`;

ret = ret.replaceAll("this.info", "$data.info");
ret = ret.replaceAll("this.id", "$props.id");
ret = ret.replaceAll("this.value", "$model");
ret = ret.replaceAll("this.action", "$props.action");
ret = ret.replaceAll("this.action_name", "action_name");
ret = ret.replaceAll("this.$refs.list", "list.value");
ret = ret.replaceAll("this.$saveData", "jv.$saveData");
ret = ret.replaceAll("this.$loadData", "jv.$loadData");
ret = ret.replaceAll("this.$emit", "$emit");
ret = ret.replaceAll("$emit(\\"input\\"", "$emit(\\"update:modelValue\\"");


Object.keys(computed).forEach(key=>{
    ret = ret.replaceAll("this." + key , key );
});


Object.keys(methods).forEach(key=>{
    ret = ret.replaceAll("this." + key , key );
});

Object.keys(props_def).forEach(key=>{
    ret = ret.replaceAll("this." + key , "$props."+ key );
});

Object.keys(data).forEach(key=>{
    ret = ret.replaceAll("this." + key , "$data."+ key );
});
return ret;
`

const $props = defineProps({});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const txt1_lines = $computed(function () {
    return $data.txt1.split("\n").filter(it => it).map(it => it.trim());
});


const txt3_lines = $computed(function () {
    return $data.txt3.split("\n").filter(it => it).map(it => it.trim());
});

const eval_click = function () {
    jv.$saveData({"txt1": $data.txt1});

    try {
        $data.txt3 = eval("(items,text) => { " + txt2 + " }")(
            txt1_lines,
            txt1_lines.join("\n")) || "";
    } catch (e) {
        jv.error(e.message);
        console.error(e);
    }
};

onMounted(function () {
    jv.$loadData("txt", v => $data.txt1 = v);
})


</script>
